<template>
	<view>
		<!-- 状态栏 -->
		<uni-status-bar bgcolor="#ffd92a"></uni-status-bar>
		<!-- 关闭按钮 -->
		<view class="icon iconfont icon-guanbi1" @tap="back"></view>
		<!-- 引入背景图 -->
		<image class="login-head" src="../../static/images/login-logo.png" mode="widthFix" lazy-load></image>
		
		<!-- 登录表单内容 -->
		<view class="body">
			<!-- 账号、昵称、登录 -->
			<template v-if="!status">
				<input v-model="username" class="uni-input common-input" placeholder="昵称/手机号/邮箱" />
				<view class="login-input-box">
					<input password v-model="password" class="uni-input common-input forget-input" placeholder="请输入密码" />
					<view class="forget u-f-ajc login-font-color" @tap="forgetPwd">
						忘记密码?
					</view>
				</view>
			</template>
			
			
			<!-- 验证码登录 -->
			<template v-else>
				<view class="login-input-box">
					<view class="phone u-f-ajc">+86</view>
					<input v-model="phone" class="uni-input common-input phone-input" placeholder="输入手机号" />
				</view>
				<view class="login-input-box">
					<input v-model="verifica" class="uni-input common-input verifica-input" placeholder="输入验证码" />
					<view class="verifica u-f-ajc login-font-color" @tap="getVerifica">
						<view class="u-f-ajc verifica-btn" :class="!codetime ? 'active' : 'disable'">
							{{!codetime ? '点击获取' : codetime + ' S后获取'}}
						</view>
					</view>
				</view>
			</template>
			
			<button 
			class="user-set-btn" 
			type="primary"
			:class="{'user-set-btn-disable' : disable}" 
			:disabled="disable"  
			:loading="loading"
			@tap="submit"
			>登录</button>
		</view>
		<!-- 登录状态切换 -->
		<view class="login-status u-f-ajc login-padding" @tap="changeStatus">
			{{status ? '账号密码登录' : '验证码登录'}}<view class="icon iconfont icon-jinru login-font-color"></view>
		</view>
		<!-- 第三方登录 -->
		<view class="other-login-title u-f-ajc login-padding login-font-color">第三方登录</view>
		<other-login></other-login>
		
		<!-- 协议 -->
		<view class="login-rule u-f-ajc login-padding login-font-color">
			注册即代表您同意 <view>《XXXXXX用户协议》</view>
		</view>
	</view>
</template>
<script>
	import uniStatusBar from '../../components/uni-status-bar/uni-status-bar.vue';
	import otherLogin from '../../components/home/other-login.vue';
	export default {
		components:{
			uniStatusBar,
			otherLogin,
		},
		data() {
			return {
				status: false, // false：账号密码登录，true：手机验证码登录
				disable: true,
				loading: false,
				username: '',
				password: '',
				phone:'',
				verifica: '',
				codetime: 0,
				providerList: []
			}
		},
		watch:{
			username(){
				this.changeBtn()
			},
			password(){
				this.changeBtn()
			},
			phone(){
				this.changeBtn()
			},
			verifica(){
				this.changeBtn()
			}
		},
		methods: {
			/* 初始化表单 */
			clearInput() {
				this.username = '',
				this.password = '',
				this.phone = '',
				this.verifica = ''
			},
			/* 改变按钮状态 */
			changeBtn(){
				if((this.username && this.password) || (this.phone && this.verifica)){
					this.disable = false
					return;
				}
				this.disable = true;
			},
			/* 获取验证码 */
			getVerifica(){
				if(this.codetime > 0){
					return;
				}
				// 验证手机号
				if(!this.verificaPhone()){
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}
				// 请求服务器，发送验证码
				console.log('获取验证码')
				// 发送成功，开启倒计时
				this.codetime = 10;
				let timer = setInterval(() => {
					this.codetime --;
					if(this.codetime < 1){
						clearInterval(timer);
						this.codetime = 0;
					}
				}, 1000);
				
			},
			/* 忘记密码 */
			forgetPwd(){
				console.log('忘记密码')
			},
			/* 切换登录状态 */
			changeStatus(){
				this.clearInput();
				this.status = !this.status;
			},
			/* 返回上一步 */
			back(){
				
			},
			/* 提交登录 */
			submit(){
				// 账号密码登录
				if(!this.status){
					
					return;
				}
				if(!this.verificaPhone()){
					return;
				}
			},
			verificaPhone(){
				let pattern = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				return pattern.test(this.phone);
			}
		}
	}
</script>

<style>
	@import '../../common/form.css';
	.login-padding{
		padding: 20upx 0;
	}
	.login-font-color{
		color: #BBBBBB;
	}
	.icon-guanbi1{
		position: fixed;
		top: 60upx;
		left: 30upx;
		z-index: 100;
		font-size: 40upx;
		font-weight: bold;
		color: #332F0A;
	}
	.login-head{
		width: 100%;
	}
	
	.login-input-box{
		position: relative;
	}
	
	.login-input-box .phone,.forget,.verifica {
		position: absolute;
		top: 0;
		height: 100%;
		z-index: 100;
	}
	.login-input-box .phone-input{
		padding-left: 80upx;
	}
	
	.login-input-box .forget-input,.verifica-input{
		padding-right: 150upx;
	}
	.login-input-box .forget,.verifica{
		right: 0;
		width: 150upx;
	}
	.login-input-box .phone{
		left: 0;
		width: 80upx;
		font-weight: bold;
		font-size: 32upx;
	}
	.verifica-btn{
		border-radius: 10upx;
		font-size: 25upx;
		padding: 10upx 0;
		width: 150upx;
	}
	.active{
		background: #2CAEFC;
		color: #333333 !important;
	}
	.disable{
		background: #EEEEEE;
	}
	
	.login-status{
		
	}
	.other-login-title{
		position: relative;
	}
	.other-login-title:before, .other-login-title:after{
		content: '';
		position: absolute;
		background: #BBBBBB;
		height: 1upx;
		width: 100upx;
		top: 50%;
	}
	.other-login-title:before{
		left: 25%;
	}
	.other-login-title:after{
		right: 25%;
	}
	.login-rule{
		
	}
	.login-rule view{
		color: #007AFF;
	}
</style>
